<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>{$region['title']}</title>
    <link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/style/style1/static/css/region.css" />
    <link href="{$_W['siteroot']}app/resource/css/bootstrap.min.css" rel="stylesheet">
    <link href="{$_W['siteroot']}app/resource/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.js"></script>
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.extend.js"></script>
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.ui.js"></script>
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.fix.js"></script>
    <!--刷新-->
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/refresh.js"></script>
    <style type="text/css">
/*加载*/
    
    .ui-refresh-down {
        height: 42px;
        border-top: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        line-height: 42px;
        background: #f0f0f0;
        text-align: center;
    }
    
    .ui-refresh-icon {
        display: inline-block;
        content: '';
        background:url({MODULE_URL}template/mobile/style/style1/static/image/arrow-down.png) no-repeat;
        width: 12px;
        background-size: 12px;
        height: 7px;
        margin-right: 5px;
    }
    
    .ui-refresh-icon {
        display: inline-block;
        content: '';
        background:url({MODULE_URL}template/mobile/style/style1/static/image/arrow-down.png) no-repeat;
        width: 12px;
        background-size: 12px;
        height: 7px;
        margin-right: 5px;
    }
    
    .ui-loading {
        display: inline-block;
        content: '';
        background:url({MODULE_URL}template/mobile/style/style1/static/image/loading.gif) no-repeat;
        width: 16px;
        background-size: 16px;
        height: 16px;
        margin-right: 5px;
    }
    
    .res {
        position: absolute;
        top: 70px;
        right: 0;
        width: 120px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.6);
        font-style: normal;
    }
    
    .p1 {
        position: absolute;
        top: 125px;
        width: 90%;
        height: 30px;
        line-height: 30px;
        /*        border-bottom-left-radius: 2px;
        border-top-left-radius: 2px;*/
        color: white;
        background-color: rgba(0, 0, 0, 0.6);
        font-style: normal;
        font-size: 12px;
    }

#header {
    height: 42px;
    width: 100%;
    background: #48b54e;
    line-height: 42px;
    color: #fff;
    text-align: center;
    position: fixed;
    /*z-index: 1000;*/
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 350ms ease;
    -moz-transition: -moz-transform 350ms ease;
     display: -webkit-box;
}
#left_div {
    width: 30px;
    height: 42px;
    background:url({MODULE_URL}template/mobile/style/style1/static/image/arrow-r.png) center no-repeat;
    background-size: 18px;
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
#title {
    font-size: 20px;
    font-weight: bold;
    color: white;
}

a{
    text-decoration: none
}
a:link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:none;
}
    </style>
</head>

<body style="background-color: #f7f7f7;">
    <!-- <div id="header">
        <div id="left_div" onClick="window.location.href='{php echo $this->createMobileUrl('nav')}'"></div>
        <div id="middle_div" style="text-align:center">
            <h1 id="title" style="margin-top:10px;">活动列表</h1>
        </div>
    </div> -->
    <div style="width:100%;height:40px;background:#48b54e;">    
        <a href="javascript:;" onClick="window.location.href='{php echo $this->createMobileUrl('nav')}'" style="font-size:18px;color:white;display:block;float:left;margin-left:10px;">
            <i class="fa fa-chevron-left" style='line-height:40px;'></i>
        </a>
        <a href="" style="font-size:18px;color:white;display:block;line-height:40px;text-align:center;margin:0 auto">
           活动列表
        </a> 
</div>
    <div id="page">
        <div class="cont" >
            <div class="ui-refresh">
                <div class="data-list">
                </div>
                <div class="ui-refresh-down"></div>
            </div>
        </div>
    </div>
    <script>
    /*ajax请求函数,判断共几页，呈现不同效果*/
    (function() {
        xqAjax();

        function xqAjax() {
            var url = "{php echo $this->createMobileUrl('activity',array('op' => 'list'))}";
            $.ajax({
                url: url,
                async: false,
                type: 'post',
                dataType: 'json',
                data: {

                },
                beforeSend: function() {
                    //$("#data-list").html("<li class='seach_loading'><img src='{MODULE_URL}template/mobile/style/style1/static/image/loading.gif'/>为您搜索中……</li>")
                },
                success: function(data) {
                    var $list = $('.data-list'),
                        html = (function(data) { //数据渲染
                            var liArr = [];
                            $.each(data.allhtml, function() {
                                liArr.push(this.html);
                            });
                            return liArr.join('');
                        })(data);

                    $('.data-list').html(html)
                    if (data.page_count < 2) {
                        $(".ui-refresh-down").html("<span class='ui-refresh-label'>没有更多内容了</span>");
                    } else {
                        refreshFun();
                    }
                },
                // error: function() {
                //     alert('请求不到数据，请重新搜索！');
                // }

            })
        }

        /*组件初始化refreshFun函数*/

        function refreshFun() {
            var index = 1;
            $('.ui-refresh').refresh({
                ready: function(dir, type) {
                    var me = this;
                    index++;
                    $.getJSON("{php echo $this->createMobileUrl('activity',array('op' => 'list'))}", {
                        page: index,

                    }, function(data) {
                        var $list = $('.data-list'),
                            html = (function(data) { //数据渲染
                                var liArr = [];
                                $.each(data.allhtml, function() {
                                    liArr.push(this.html);
                                });
                                return liArr.join('');
                            })(data);
                        $list[dir == 'up' ? 'prepend' : 'append'](html);
                        if (index < data.page_count) {
                            me.afterDataLoading();
                        } else {
                            me.disable(dir, false);
                        }
                    });
                }
            });

        }
        /*组件初始化js end*/
    })();
    </script>
    {template 'style/style1/footer'}
</body>

</html>
